<template>
  <div class="applicationcode">
    <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="$route.meta.title"
    >
      <template v-if="$store.state.user.show">
        <svg-icon icon-class="count" class="add" @click.native="changeLocation" />
      </template>
    </header-bar>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入隔离点名称"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div id="content" class="content">
      <van-pull-refresh v-model="refreshing" success-text="刷新成功" @refresh="onRefresh">
        <van-list
          v-if="list.length!==0"
          v-model="loading"
          :finished="finished"
          :finished-text="listText"
          :immediate-check="false"
          @load="pageInfoList"
        >
          <van-grid :gutter="10" :column-num="2">
            <van-grid-item v-for="(item,index) in list" :key=" index" icon="home-o" :text="item.organizationName" @click="getPersonMessage(item)">
            <!-- <div class="order-content">
          <div class="content-message"><div>姓名：</div><div>测试</div></div>
        </div> -->
            </van-grid-item>
          </van-grid>
        </van-list>
        <van-empty v-else description="暂无数据" />
      </van-pull-refresh>
      <div style="width:100%;height:260px;" :class="[showTitlePaddingTop?'title-message':'']" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridItem, Search } from 'vant'
import { PullRefresh, List } from 'vant'
import { Empty } from 'vant'
Vue.use(Empty)
Vue.use(PullRefresh).use(List)
Vue.use(Grid)
Vue.use(GridItem).use(Search)
import $api from '@/api/index'
import { mapGetters } from 'vuex'
export default {
  name: 'ChiooceDistance',
  data() {
    return {
      list: [],
      listText: '暂无数据...',
      loading: false,
      finished: false,
      refreshing: false,
      obj: {
        pageNum: 1,
        pageSize: 20,
        reportName: ''
      },
      phone: '',
      employeeCode: '',
      value: ''
    }
  },
  computed: {
  },
  beforeCreate() {
    this.$dd.hideTitleBar()
    this.$store.dispatch('user/showView', this.$route.name)
    this.$dd.setTitle({
      title: '选择隔离点'
    }).then(res => {
      console.log(res)
    }).catch(err => { console.log(err) })
  },
  beforeDestroy() {
    this.$dd.hideTitleBar()
  },
  beforeRouteLeave(to, from, next) {
    sessionStorage.setItem('scrollHH', document.getElementById('content').scrollTop)
    next()
  },
  mounted() {
    this.$dd.ready(() => {
      this.$dd.hideTitleBar()
      this.getUserMessage()
      this.$dd.setTitle({
        title: ''
      }).then(res => {
        console.log(res)
      }).catch(err => { console.log(err) })
    })

    if (this.$until.h5userAgent() === 1) {
      this.$store.dispatch('user/showTitle', true)
    }
  },
  activated() {
    this.$dd.hideTitleBar()
    this.$dd.setTitle({
      title: '选择隔离点'
    }).then(res => {
      console.log(res)
    }).catch(err => { console.log(err) })
    if (this.$store.state.user.refresh) {
      this.getUserMessage()
    }
    if (sessionStorage.getItem('scrollHH')) {
      document.getElementById('content').scrollTop = sessionStorage.getItem('scrollHH')
    }
  },
  methods: {
    chiooceDistance() {
      this.$router.push({ path: '/applicationcode/index' })
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.obj.pageNum = 1
      this.obj.pageSize = 20
      this.pageInfoList()
    },
    pageInfoList() {
      this.obj['phone'] = sessionStorage.getItem('phone')
      this.obj['employeeCode'] = sessionStorage.getItem('employeeCode')
      $api.user.pageReportInfo(this.obj).then(res => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }
        if (res.data.list.length === 0) {
          this.list = []
        } else {
          this.list = this.list.concat(res.data.list)
        }

        const obj = {}
        this.list = this.list.reduce((cur, next) => {
          obj[next.id] ? '' : obj[next.id] = true && cur.push(next)
          return cur
        }, [])
        this.loading = false
        console.log(this.list)
        this.obj.pageNum = res.data.nextPage !== 0 ? res.data.nextPage : 1
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      }, error => {
        this.refreshing = false
        console.log(error)
      })
    },
    changeLocation() {
      this.$router.push({ path: '/source/index' })
    },
    getUserMessage() {
      this.$dd.getAuthCode({ }).then(res => {
        const code = res.code
        // 0市级管理员1//区县管理员//2上报工作人
        $api.user.getCreateId({ authCode: code }).then(res => {
          this.$store.dispatch('distanceInfo/setCreateId', res.data.createId)
          sessionStorage.setItem('phone', res.data.phone)
          sessionStorage.setItem('employeeCode', res.data.employeeCode)
          sessionStorage.setItem('userRole', res.data.userRole)
          const role = res.data.userRole.toString()
          if (role === '0' || role === '1') {
            this.$store.dispatch('user/show', true)
          } else if (role === '2') {
            this.$store.dispatch('user/show', false)
          }
          this.pageInfoList()
        }, error => {
        // this.$Toast('网络繁忙')
          console.log(error)
        })
      }, error => {
        console.log(error)
      // alert('请重新进入应用')
      })
    },
    getPersonMessage(code) {
      this.$store.dispatch('distanceInfo/setReportId', code.organizationCode)
      this.$store.dispatch('distanceInfo/setReportName', code.organizationName)
      this.$store.dispatch('distanceInfo/setParentName', code.parentName)
      this.$store.dispatch('user/refresh', true)
      this.$router.push({ path: '/applicationcode/index', query: { title: code.organizationName }})
    },
    onSearch() {
      this.obj.reportName = this.value
      this.obj.pageNum = 1
      this.list = []
      this.pageInfoList()
    //   this.$router.push({ path: '/applicationcode' })
    }
  }
}
</script>

<style lang="scss" scoped>
 .applicationcode{
     width:100%;
  height:100%;
  .content{
    width:100%;
    height:100%;
    overflow-y: scroll;
    margin-top:10px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
 }
.order-content{
    width:96%;
    margin:10px auto;
    margin-top:10px;
    box-sizing: border-box;
    padding:0px 20px 20px 20px;
    background-color:#ffffff;
    border-radius: 10px;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .content-message{
    padding:20px 10px 10px 10px;
    display:flex;
    >div:nth-child(1){
      color:rgba(119, 119, 119, 0.6);
      font-size: 30px;
      flex:1.5;
    }
    >div:nth-child(2){
      padding-left:10px;
      color:rgba(65, 157, 244, 1);
      font-size: 30px;
      flex:3;
    }
  }
  .add{
    width:40px;
    height:40px;
  }
</style>
